<script setup lang="ts" name="ImplementationType">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { getImplementationTypeOptions, isImplementSupported, getBindingTypeOptions, getMapDecisionResultOptions, getImplementData, setValue } from '../../utils/implementationType'
import EventEmitter from '@/utils/EventEmitter'

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const form = ref({
  type: '',
  class: '',
  expression: '',
  resultVariable: '',
  delegateExpression: '',
  topic: '',
  connectorId: '',
  decisionRef: '',
  decisionRefBinding: '',
  decisionRefVersion: '',
  decisionRefVersionTag: '',
  decisionRefTenantId: '',
  decisionRefResultVariable: '',
  mapDecisionResult: ''
})

const implementationTypeList = ref([])
const bindingTypeList = ref([])
const mapDecisionResultList = ref([])

const initData = () => {
  implementationTypeList.value = getImplementationTypeOptions(mapStates.value.getActive())
  bindingTypeList.value = getBindingTypeOptions()
  mapDecisionResultList.value = getMapDecisionResultOptions()
  const res: any = getImplementData(mapStates.value.getActive())
  form.value.type = res.type
  if (res.type === 'class') {
    form.value.class = res.class
  } else if (res.type === 'expression') {
    form.value.expression = res.expression
    form.value.resultVariable = res.resultVariable
  } else if (res.type === 'delegateExpression') {
    form.value.delegateExpression = res.delegateExpression
  } else if (res.type === 'dmn') {
    form.value.decisionRef = res.decisionRef
    form.value.decisionRefBinding = res.decisionRefBinding
    if (res.decisionRefBinding === 'version') {
      form.value.decisionRefVersion = res.decisionRefVersion
    } else if (res.decisionRefBinding === 'versionTag') {
      form.value.decisionRefVersionTag = res.decisionRefVersionTag
    }
    form.value.decisionRefTenantId = res.decisionRefTenantId
    form.value.decisionRefResultVariable = res.decisionRefResultVariable
    if (res.decisionRefResultVariable !== '') {
      form.value.mapDecisionResult = res.mapDecisionResult
    }
  } else if (res.type === 'external') {
    form.value.topic = res.topic
  } else if (res.type === 'connector') {
    form.value.connectorId = res.connectorId
  }
}

const setImplementationValue = (type, value) => {
  setValue(mapStates.value.getActive(), type, value)
}

const eventEmitterListener = () => {
  if (isImplementSupported(mapStates.value.getActive())) {
    initData()
  }
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', eventEmitterListener)
})

onMounted(() => {
  initData()
  EventEmitter.on('element-update', eventEmitterListener)
})
</script>

<template>
  <el-collapse-item name="implementation-type">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:layout-masonry-fill"></svg-icon>
        <h2>实现类型</h2>
      </div>
    </template>
    <el-form-item label="类型">
      <el-select v-model="form.type" clearable @change="(v) => setImplementationValue('type', v)">
        <el-option v-for="item in implementationTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <template v-if="form.type === 'class'">
      <el-form-item label="java 类">
        <el-input v-model="form.class" clearable @change="(v) => setImplementationValue('type', v)" />
      </el-form-item>
    </template>
    <template v-else-if="form.type === 'expression'">
      <el-form-item label="表达式">
        <el-input v-model="form.expression" @change="(v) => setImplementationValue('expression', v)" />
      </el-form-item>
      <el-form-item label="结果变量">
        <el-input v-model="form.resultVariable" clearable @change="(v) => setImplementationValue('resultVariable', v)" />
      </el-form-item>
    </template>
    <template v-else-if="form.type === 'delegateExpression'">
      <el-form-item label="代理表达式">
        <el-input v-model="form.delegateExpression" clearable @change="(v) => setImplementationValue('delegateExpression', v)" />
      </el-form-item>
    </template>
    <template v-else-if="form.type === 'external'">
      <el-form-item label="主题">
        <el-input v-model="form.topic" @change="(v) => setImplementationValue('topic', v)" />
      </el-form-item>
    </template>
    <template v-else-if="form.type === 'connector'">
      <el-form-item label="连接器ID">
        <el-input v-model="form.connectorId" clearable @change="(v) => setImplementationValue('connectorId', v)" />
      </el-form-item>
    </template>
    <template v-else-if="form.type === 'dmn'">
      <el-form-item label="决策参考">
        <el-input v-model="form.decisionRef" clearable @change="(v) => setImplementationValue('decisionRef', v)" />
      </el-form-item>
      <el-form-item label="绑定版本">
        <el-select v-model="form.decisionRefBinding" @change="(v) => setImplementationValue('decisionRefBinding', v)">
          <el-option v-for="item in bindingTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.decisionRefBinding === 'version'" label="版本">
        <el-input v-model="form.decisionRefVersion" clearable @change="(v) => setImplementationValue('decisionRefVersion', v)" />
      </el-form-item>
      <el-form-item v-if="form.decisionRefBinding === 'versionTag'" label="版本标签">
        <el-input v-model="form.decisionRefVersionTag" clearable @change="(v) => setImplementationValue('decisionRefVersionTag', v)" />
      </el-form-item>
      <el-form-item label="租户ID">
        <el-input v-model="form.decisionRefTenantId" clearable @change="(v) => setImplementationValue('decisionRefTenantId', v)" />
      </el-form-item>
      <el-form-item label="结果变量">
        <el-input v-model="form.decisionRefResultVariable" clearable @change="(v) => setImplementationValue('decisionRefResultVariable', v)" />
      </el-form-item>
      <el-form-item v-if="form.decisionRefResultVariable !== ''" label="映射决策结果">
        <el-select v-model="form.mapDecisionResult" @change="(v) => setImplementationValue('mapDecisionResult', v)">
          <el-option v-for="item in mapDecisionResultList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </template>
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        font-weight: bold;
        font-size: 14px;
      }

      .el-button {
        margin-left: 12px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}

.el-form-item {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button.add {
      width: 100%;
      margin: 12px 0 0;
    }
  }
}

.item-content {
  display: flex;
  flex: 1;
  padding: 6px;

  .el-select {
    flex: none;
    width: 90px;

    :deep(.el-input) {
      .el-input__wrapper.is-focus {
        z-index: 2;
      }
    }
  }

  >.el-input,
  .el-date-editor.el-input {
    flex: 1;
    margin-left: -1px;
  }

  :deep(.el-date-editor) {
    flex: 1;
    width: auto;
    margin-left: -1px;

    .el-input__wrapper {
      width: 100%;

      &.is-focus {
        z-index: 2;
      }
    }
  }
}
</style>
